<template>
  <div class="zcjlBox">
    <van-cell :title="fyInfo.roomName" value="" :label="fyInfo.placeInfo.placeName" />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      style="margin-top: 12px;"
    >
      <div class="cus-card" v-for="(item, index) in list" :key="index">
        <van-cell style="padding: 5px 0" :title="item.zcsj + '自查记录'" is-link :url="'/zcjl-detail?id=' + item.id" />
      </div>
    </van-list>
    <van-button v-if="role == 'yz'" url='/zcjl-add' class="fixed-button" round type="info" block>新增自查</van-button>
  </div>
</template>

<script>
import { xfzcList, xfzcDetail } from '@/api/xfgl';
export default {
  name: 'zcjl',
  data() {
    return {
      loading: false,
      finished: true,
      list: [],
      role: window.localStorage.getItem('role'),
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      fyInfo: JSON.parse(window.localStorage.getItem('fyInfo'))
    }
  },
  mounted() {
    if(!this.fyInfo) {
      this.$store.dispatch('fyxx/getInfo', this.$route.query.id)
    }
    this.xfzcList()
  },
  methods: {
    onLoad() {
      if(this.total > this.params.pageNum * this.params.pageSize) {
        this.xfzcList()
      }
      this.loading = false
      this.finished = true
    },
    xfzcList() {
      let params = this.params;
      params.placeCode = this.fyInfo.placeInfo.placeCode;
      xfzcList(params).then(res => {
        if(res.code == 200) {
          this.list = res.rows;
          this.total = res.total;
        }
      })
    }
  },
}
</script>

<style lang="less" scoped>
.zcjlBox {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #F5F5F5;
  /deep/ .van-cell__title {
    text-align: left;
  }
  .cus-card {
    border-radius: 9px;
    background: #FFFFFF;
    margin: 12px 16px;
    padding: 10px;
    box-sizing: border-box;
    .time {
      color: #969799;
      font-size: 14px;
      letter-spacing: 0px;
      text-align: left;
      font-weight: normal;
    }
    .other-info {
      display: flex;
      align-items: center;
      font-size: 14px;
      .name {
        color: #333333;
        line-height: 24px;
        letter-spacing: 0px;
        text-align: left;
        margin-right: 16px;
        margin-top: 8px;
      }
      .score {
        width: calc(48% - 50px);
        text-align: left;
        margin-top: 8px;
      }
      .orangeColor {
        color: #FF5B05;
      }
      .blueColor {
        color: #1677FF;
      }
    }
  }
  .fixed-button {
    position: fixed;
    width: calc(100% - 32px);
    left: 16px;
    bottom: 40px;
    cursor: pointer;
  }
}

</style>